import React, { useEffect, useRef } from 'react';
import { Button, Alert } from 'antd';
import styles from './WorkFlow.less';
// import flow from './mock/dingding';
import { detectZoom, watchScorll } from './utils';
import { useLayout } from './hooks';

const Layout = props => {
    const { style = null, wrapStyle = null, children } = props;
    const { scale, setScale } = useLayout();
    const refContainer = useRef(null); // 如同之前的 React.createRef()
    useEffect(() => {
        if (refContainer.current) {
            watchScorll(refContainer.current);
        }
    }, []);
    return (
        <div
            style={{
                ...style
            }}
            className={styles.container}
            ref={refContainer}
        >
            {detectZoom() !== 100 && (
                <Alert
                    message="当前页面不是100%显示，请按键盘 ctrl+0 恢复100%显示标准，以防页面显示错乱！"
                    type="warning"
                    closable
                />
            )}
            <div className={styles.zoom}>
                <Button icon="minus" onClick={() => setScale(scale - 0.1)} />
                <div className={styles.text}>{`${(scale * 100).toFixed(
                    0
                )}%`}</div>
                <Button icon="plus" onClick={() => setScale(scale + 0.1)} />
            </div>
            <div
                style={{ ...wrapStyle, transform: `scale(${scale})` }}
                className={styles.container_wrap}
            >
                {children}
            </div>
        </div>
    );
};
export default Layout;
